<template>
	<view class="view">
		<view class="loading-box">
			<view class="loading-one" :class="classObjectOne"></view>
			<view class="loading-two" :class="classObjectTwo"></view>
			<view class="loading-three" :class="classObjectThree"></view>
			<view class="loading-four" :class="classObjectFour"></view>
		</view>
		<!-- <text class="text">
			<slot></slot>
		</text> -->
	</view>
</template>

<script>
	export default {
		name: "sx-Loading",
		// 三种选择：circle、spot、square（默认）
		props: {
			shape: {
				type: String,
				default: 'square'
			}
		},
		data() {
			return {

			};
		},
		computed: {
			classObjectOne() {
				return this.getShape(0)
			},
			classObjectTwo() {
				return this.getShape(1)
			},
			classObjectThree() {
				return this.getShape(2)
			},
			classObjectFour() {
				return this.getShape(3)
			}
		},
		methods:{
			getShape(index){
				const shapeObj = {
					circle:['loading-circle-one','loading-circle-two','loading-circle-three','loading-circle-four'],
					spot:['loading-spot-one','loading-spot-two','loading-spot-three','loading-spot-four'],
					square:['loading-square-one','loading-square-two','loading-square-three','loading-square-four']
				}
				return shapeObj[this.shape][index]
			}
		}
	}
</script>

<style lang="scss" scoped>
	$size:20;

	.view {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		flex-direction: column;

		.loading-box {
			width: ($size*2)+rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			animation: loadingBox 2s .2s ease-out infinite;
			margin-top: 20px;
			.loading-one,
			.loading-two,
			.loading-three,
			.loading-four {
				width: $size +rpx;
				height: $size + rpx;
			}

			// .loading-one {
			// 	background-color: pink;
			// }

			// .loading-two {
			// 	background-color: turquoise;
			// }

			// .loading-three {
			// 	background-color: violet;
			// }

			// .loading-four {
			// 	background-color: aquamarine;
			// }
			.loading-one {
				background-color: #2ba245;
			}
			
			.loading-two {
				background-color:  #2ba245;
			}
			
			.loading-three {
				background-color:  #2ba245;
			}
			
			.loading-four {
				background-color:  #2ba245;
			}
			

			// 圆 circle
			.loading-circle-one {
				border-radius: 100% 0 0;
				animation: loadingCircleOne 1s ease-out infinite;
			}

			.loading-circle-two {
				border-radius: 0 100% 0 0;
				animation: loadingCircleTwo 1s ease-out infinite;
			}

			.loading-circle-three {
				border-radius: 0 0 0 100%;
				animation: loadingCircleThree 1s ease-out infinite;
			}

			.loading-circle-four {
				border-radius: 0 0 100%;
				animation: loadingCircleFour 1s ease-out infinite;
			}
		}

		// 点 spot
		.loading-spot-one,
		.loading-spot-two,
		.loading-spot-three,
		.loading-spot-four,
		.loading-strike-one,.loading-strike-two,.loading-strike-three,.loading-strike-four{
			border-radius: 50%;
		}

		.loading-spot-one {
			animation: loadingSpotOne 1s ease-out infinite;
		}

		.loading-spot-two {
			animation: loadingSpotTwo 1s ease-out infinite;
		}

		.loading-spot-three {
			animation: loadingSpotThree 1s ease-out infinite;
		}

		.loading-spot-four {
			animation: loadingSpotFour 1s ease-out infinite;
		}
		
		// 平方 square
		.loading-square-one {
			animation: loadingSquareOne 1s ease-out infinite;
		}
		
		.loading-square-two {
			animation: loadingSquareTwo 1s ease-out infinite;
		}
		
		.loading-square-three {
			animation: loadingSquareThree 1s ease-out infinite;
		}
		
		.loading-square-four {
			animation: loadingSquareFour 1s ease-out infinite;
		}
		
	
		// 文本
		.text {
			font-size: 22rpx;
			margin-top: 10%;
			width: 100%;
			display: inline-block;
			text-align: center;
			color: #888;
		}
	}


	@mixin keyframes($animationName) {
		@-webkit-keyframes #{$animationName} {
			@content;
		}

		@-moz-keyframes #{$animationName} {
			@content;
		}

		@-o-keyframes #{$animationName} {
			@content;
		}

		@keyframes #{$animationName} {
			@content;
		}
	}

	@include keyframes(loadingBox) {
		100% {
			transform: rotateZ(360deg);
		}
	}

	// 圆 circle

	@include keyframes(loadingCircleOne) {

		20% {
			transform: translate(-10rpx, -10rpx);
		}

		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingCircleTwo) {

		20% {
			transform: translate(10rpx, -10rpx);
		}

		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingCircleThree) {
		20% {
			transform: translate(-10rpx, 10rpx);
		}

		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingCircleFour) {

		20% {
			transform: translate(10rpx, 10rpx);
		}

		100% {
			transform: translate(0);
		}
	}

	// 点 spot
	@include keyframes(loadingSpotOne) {
		30% {
			transform: translate(-10rpx, -10rpx);
		}
		60% {
			transform: translate(($size+10)+rpx, ($size+10)+rpx);
		}
		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingSpotTwo) {
		30% {
			transform: translate(10rpx, -10rpx);
		}
		60% {
			transform: translate(-(($size+10))+rpx, ($size+10)+rpx);
		}
		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingSpotThree) {
		30% {
			transform: translate(-10rpx, 10rpx);
		}
		60% {
			transform: translate(($size+10)+rpx, -($size+10)+rpx);
		}
		100% {
			transform: translate(0);
		}
	}

	@include keyframes(loadingSpotFour) {
		30% {
			transform: translate(10rpx, 10rpx);
		}
		60% {
			transform: translate(-($size+10)+rpx, -($size+10)+rpx);
		}
		100% {
			transform: translate(0);
		}
	}

	// 平方 square
	@include keyframes(loadingSquareOne) {
	
		50% {
			transform: translate(($size)+rpx, ($size)+rpx);
		}
	
		100% {
			transform: translate(0);
		}
	}
	
	@include keyframes(loadingSquareTwo) {
	
		50% {
			transform: translate(-($size)+rpx, ($size)+rpx);
		}
	
		100% {
			transform: translate(0);
		}
	}
	
	@include keyframes(loadingSquareThree) {
		50% {
			transform: translate(($size)+rpx, -($size)+rpx);
		}
	
		100% {
			transform: translate(0);
		}
	}
	
	@include keyframes(loadingSquareFour) {
	
		50% {
			transform: translate(-($size)+rpx, -($size)+rpx);
		}
	
		100% {
			transform: translate(0);
		}
	}


</style>
